

import { Layout,Modal ,Row,Col, Typography, Menu, Dropdown, Tag ,Tooltip , Avatar , Button } from 'antd';
import React , {useContext,useRef} from "react"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  CaretDownOutlined,
  UserOutlined,
  PoweroffOutlined,
  ExclamationCircleOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import {GolBalContext} from "@/redux"
import {inject,observer} from "mobx-react" 
import {roleList} from "@/utils"
import { history } from 'umi';
import {ajax} from "@/services"
import { baseURL } from '@/services/request';
import {changecollapsed} from "@/redux/action"
import {changePathname} from "@/redux/action"
const {Header } = Layout;
const {Title } =Typography 
const { confirm } = Modal;
function HeadPage({info}){
  const {state,dispatch} =  useContext(GolBalContext)
  const changeToggle = ()=>{
    dispatch(changecollapsed(!state.get("collapsed")))
  }
  const fileInp:any = useRef()
  const InputFileClick = async ()=>{
      var file = fileInp.current.files[0]
      console.log(file)
      var data = new FormData()
      data.append("file",file)
      let res = await ajax.uploadimg(data)
      const {code,result,avatar} = res
      if(code==200){
        // userInfo.avatar = avatar;
        info.changeUserInfo({...userInfo,avatar})
      }
  }
  const uploadFileImg = ()=>{
    fileInp.current.click();
  }
  
  const {userInfo} = info; 
  const LogoutClick = ()=>{
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '你真的要退出登录吗?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK');
        
        sessionStorage.removeItem("authtoken")
        info.changeUserInfo(null)
        history.replace("/login")
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const gotowhere = (path)=>{
    history.push(path)
    dispatch(changePathname(path))
  }
   return (
    <Header
      style={{padding:"0 20px"}}
    >
        <Row>
          <Col span={7}  style={{display:"flex"}}>
              <span style={{color:'#fff',marginRight:10}}>
                  {React.createElement(state.get('collapsed') ? MenuUnfoldOutlined : MenuFoldOutlined, {
                  className: 'trigger',
                  onClick: changeToggle,
                })}
              </span>
              <Title style={{fontSize:20,color:"#fff",height:'64px',margin:0,lineHeight:'64px'}} > 千锋武汉HTML5 </Title>
          </Col>
          <Col span={9} style={{fontSize:20,color:"orange",textAlign:'center'}}>
              <marquee >DayDayUp - 每天进步一点点</marquee>
          </Col>
          <Col span={8} style={{padding:'0 15px'}}>
             {
                userInfo&&<div className="userinfo" style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
                  <Dropdown
                    overlay={
                      <Menu>
                        <Menu.Item key="0" onClick={()=>gotowhere('/main/home')}  style={{textAlign:'center'}}> 首页</Menu.Item>
                        <Menu.Item key="1" onClick={()=>gotowhere('/main/userinfo')} style={{textAlign:'center'}}> 个人中心</Menu.Item>
                        <Menu.Item key="2" onClick={()=>gotowhere('/main/userinfo/changepass')}  style={{textAlign:'center'}}> 修改密码 </Menu.Item>
                      </Menu>
                    }
                  >
                    <span style={{color:'#fff',fontSize:18,lineHeight:'24px'}} > 
                      {userInfo.username} 
                      <CaretDownOutlined  style={{marginTop:5}} />
                    </span>
                  </Dropdown>
                  
                  <Tag style={{margin:'0 10px'}} color={roleList.find(item=>item.value==userInfo.role).color  }>
                      { roleList.find(item=>item.value==userInfo.role).text  }
                  </Tag>

                  <Tooltip title="切换头像" >
                      <input type="file" ref={fileInp} onChange={InputFileClick}  style={{display:"none"}} />
                      {
                        userInfo.avatar ?
                        <Avatar  onClick={uploadFileImg} style={{cursor:"pointer"}}  src={userInfo.avatar.replace(/public/,baseURL)} />:
                        <Avatar  onClick={uploadFileImg} style={{cursor:"pointer"}} icon={<UserOutlined />} />
                      }
                  </Tooltip>
                  
                  <Tooltip title="退出登录" >
                     <Button onClick={LogoutClick} type="primary" style={{margin:'0 10px'}}  shape="circle" icon={<PoweroffOutlined />} /> 
                  </Tooltip>

                </div>  
             }
          </Col>
        </Row>
    </Header>
   )
}
export const Head =  inject('info')(observer(HeadPage))